<!--心理科普-->
<template>
<div class="container">
  <div class="xd-LearningHome-NoticeCenter">
    <el-container class="xd-el-container">
       <el-aside
        class="xd-el-aside"
        width="16vw"
      >
        <el-card
          class="box-card m_t_b_1vw"
          shadow="hover"
        >
          <div slot="header">
            <div class="tag">阅读精选</div>
          </div>
          <div
            v-for="(item, index) in topNoticeList"
            :key="'top' + index"
            class="aside-list-item"
            @click="goNewsDetail(item.scienceId)"
          >{{'·' +item.scienceTitle}}</div>
        </el-card>
      </el-aside>
      <el-main class="xd-el-main">
        <router-view></router-view>
      </el-main> 
    </el-container>
  </div>
</div>
</template>
<script>
export default {
  name: 'CinziqaoEducation',
  data() {
    return {
      topNoticeList: []
    }
  },
  methods: {
    fetchNoticeList() {
      utils.post('/psychic/psychicScience/listHot', {}, res => {
        if (res.success) {
          this.topNoticeList = res.data.rows
        }
      })
    },
    goNewsDetail(id) {
      this.$router.push({ path: '/Cinziqao/Detail', query: { id: id, activeMenu: '/Cinziqao' } })
    }
  },
  created() {
    this.$store.commit('updateActiveMenu', '/Cinziqao')
    this.fetchNoticeList()
  }
}
</script>
<style>
.aside-list-item {
  cursor: pointer;
  padding: 5px 0
}
</style>
